<template>
    <div :id="id"></div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn' //中文包
export default {
    name: "CKEditorVue",

    data() {
        return {
            editor: null,
            isVal: false
        }
    },
    props: {
        editorVal: null,
        id: {
            type: String,
            default: 'editor'
        }
    },
    model: {
        prop: 'editorVal',
        event: 'input'
    },
    mounted() {
        this.initEditor();
    },

    watch: {
        editorVal(n, o) {
            if (!this.isVal) {
                this.editor.setData(n);
                this.isVal = true;
            }
        }
    },

    methods: {
        initEditor() {
            CKEditor.create(document.querySelector('#' + this.id), {
                // removePlugins: ['MediaEmbed'], //除去视频按钮
                language: 'zh-cn',  // 中文
                ckfinder: {
                    'uploaded': 1, 'url': '/'
                    // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                },
            }).then(editor => {
                editor.setData(this.editorVal);
                editor.model.document.on('change:data', () => {
                    // console.log(editor.getData());
                    this.$emit('input', editor.getData());
                });
                // const toolbarContainer = document.querySelector('#toolbar-container')
                // toolbarContainer.appendChild(editor.ui.view.toolbar.element)
                // // 加载了适配器
                // editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                // 	// return new UploadAdapter(loader)
                // }
                this.editor = editor // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
            }).catch(error => {
                console.error(error)
            })
        }
    }
}
</script>
